<template>
  <van-action-sheet :model-value="modelValue" @close="close" title="TA们也在学">
    <view class="parti-wrap">
      <van-list v-model="listLoading" :finished="listFinished" :finished-text="list.length === 0 ? '' : '没有更多了'" @load="loadMore" >
        <view class="parti-each" v-for="(item, index) in list" :key="index" >
          <view class="flex">
            <image v-if="item.photoHttpUrl" :src="item.photoHttpUrl" alt="" />
            <generate-photo :width="20" :id="item.id" :text="item.realName" style="margin-right: 5px;" v-else></generate-photo>
            <view class="fc-666 fs-12 parti-name" v-if="item.realName">{{ item.realName }}</view>
          </view>
          <view class="fc-666 fs-12 parti-name">{{ item.dateString }}前加入课程</view>
        </view>
      </van-list>
    </view>
  </van-action-sheet>
</template>

<script setup>
import {ref, onMounted, getCurrentInstance, watch} from "vue";
import generatePhoto from "@/components/dragMaker/generatePhoto"
import VanActionSheet from "@/components/vant/van-action-sheet/van-action-sheet.vue";
import VanList from "@/components/vant/van-list/van-list.vue";

const {$api, $toast, $uniPush, $uniRedirectTo, $dialog} = getCurrentInstance()?.proxy
const emit = defineEmits(['close'])
const list = ref([])
const page = ref({pageNumber: 1, pageSize: 10})
const listLoading = ref(false)
const listFinished = ref(false)

const props = defineProps({
  courseId: {type: String, default: ''},
  modelValue: {type: Boolean, default: false}
})
onMounted(()=>{
  getList(true)
})
watch(()=>props.modelValue, (val)=>{
  console.log(`=>(Partici.vue:39) val`, val);
})
function getList(loadNew = false) {
  if (loadNew === true) {
    listFinished.value = false
    page.value.pageNumber = 1
  }
  listLoading.value = true
  let params = Object.assign({ courseId: props.courseId }, page.value)
  $api.mgtCourse.getCourseParticipants(params).then(res => {
    loadNew && (list.value = [])
    list.value = list.value.concat(res.list || [])
    noMoreState.value(res)
    listLoading.value = false
  }).catch(e => {
    listLoading.value = false
    listFinished.value = true
  })
}

// 加载更多
function loadMore () {
  if (!listFinished.value) getList()
}
function noMoreState (res) {
  if (res.totalPage <= page.value.pageNumber || (res.list && res.list.length === 0)) {
    listFinished.value = true
  } else {
    page.value.pageNumber++
  }
}
function close(){
  emit('close')
}
</script>

<style lang="scss" scoped>
.parti-wrap {
  padding: 40px 20px 20px 20px;
  .parti-each  {
    :deep(uni-image) {
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      margin-right: 8px !important;
      div{
        background-size: 100% 100%;
      }
    }
  }
}
</style>